import { useEffect, useState } from "react";
import { Button, Flex, Input, Modal } from "antd";

import { UserAccountDataType } from "@/types/user";

type RejectModalProps = {
  data: UserAccountDataType | UserAccountDataType[] | null;
  open: boolean;
  onCancel: () => void;
  onOk: (rejectReason: string) => void;
  loading?: boolean;
};

export default function RejectModal({ data, open, onCancel, onOk, loading }: RejectModalProps) {
  console.log("reject modal data: ", data);
  const [rejectReason, setRejectReason] = useState("");

  useEffect(() => {
    if (!open) {
      setRejectReason("");
    }
  }, [open]);

  if (!data) return null;

  const renderContent = () => {
    if (Array.isArray(data)) {
      const isPass = data.some((account) => account.status === "verified");
      if (isPass) {
        return `此用户【${data.map((account) => account.nickname).join("】、【")}】帐号绑定已通过，是否修改为驳回？`;
      } else {
        return `是否确定驳回此用户的【${data.map((account) => account.nickname).join("】、【")}】的帐号绑定`;
      }
    } else if (!Array.isArray(data)) {
      const { status, nickname } = data;
      if (status === "verified") {
        return `此用户【${nickname}】帐号绑定已通过，是否修改为驳回？`;
      } else if (status === "pending") {
        return `是否确定驳回此用户的【${nickname}】的帐号绑定？`;
      }
    }
    return "";
  };

  const handleOk = () => {
    if (!rejectReason.trim()) {
      return;
    }
    onOk(rejectReason);
  };

  return (
    <Modal open={open} centered footer={false} closable={false}>
      <Flex vertical gap={20} className="pt-4">
        <h1 className="text-base font-bold text-center">
          <span className="w-4/5">{renderContent()}</span>
        </h1>
        <Flex vertical gap={4}>
          <p className="text-sm text-gray-500">请填写驳回原因告知用户</p>
          <Input.TextArea
            value={rejectReason}
            onChange={(e) => setRejectReason(e.target.value)}
            placeholder="请输入驳回原因"
            rows={4}
            className="text-sm"
          />
        </Flex>
        <Flex gap={32} justify="center">
          <Button type="primary" ghost onClick={onCancel}>
            取消
          </Button>
          <Button type="primary" onClick={handleOk} loading={loading} disabled={!rejectReason.trim()}>
            确定
          </Button>
        </Flex>
      </Flex>
    </Modal>
  );
}
